import { useState } from "react"

const TodoHeader = ({addItem}) => {
  const [additemname,setAddItemName] = useState('')
  const pressEnter = (e) => {
    if(e.keyCode === 13) {
      addItem(additemname)
      setAddItemName('')
    }
  }
  return (
    <header className="header">
      <h1>todos</h1>
      <input
        className="new-todo"
        placeholder="What needs to be done?"
        value={additemname}
        onChange={(e)=>setAddItemName(e.target.value)}
        onKeyUp={(e)=>pressEnter(e)}
        autoFocus
      />
    </header>
  )
}

export default TodoHeader
